<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">
		<p:outputPanel>
			<h:form id="bookForm">
				<p:watermark for="title" value="title" />
				<p:inputText id="title" value="#{booksBackingBean.newBook.title}" immediate="true" />
				<p:watermark for="description" value="description" />
				<p:inputText id="description" value="#{booksBackingBean.newBook.description}" immediate="true" />
				<p:commandButton action="#{booksBackingBean.addNewBook()}" value="Add book" update=":bookForm" />
				
				<p:dataTable id="allbooks" var="book" value="#{booksBackingBean.allBooks}" >  
  
			        <p:column headerText="title" style="width:100px">  
			            <h:outputText value="#{book.title}" />  
			        </p:column>  
			        
			  		<p:column headerText="author(s)" style="width:100px">  
			            <p:dataList id="bookAuthors" var="author" value="${book.authors}">
				           <h:outputText value="#{author.firstName} #{author.lastName}" />
			            </p:dataList>  
			        </p:column>
			          
			        <p:column headerText="description" style="width:100px">  
			            <h:outputText value="#{book.description}" />  
			        </p:column>
			        
			  		<p:column headerText="isbn" style="width:100px">  
			            <h:outputText value="#{book.isbn}" />  
			        </p:column>
			        
			        <p:column headerText="page count" style="width:100px">  
			            <h:outputText value="#{book.pageCount}" />  
			        </p:column>
			        
			        <p:column headerText="publication date" style="width:100px">  
			            <h:outputText value="#{book.publicationDate}" />  
			        </p:column>
			        
			        <p:column headerText="rating" style="width:100px">  
			            <h:outputText value="#{book.rating}" />  
			        </p:column>
			        
			        <p:column style="width:40px">  
						<p:commandButton id="deleteButton" update=":bookForm" value="Delete" action="#{booksBackingBean.removebook(book)}"/>   
			        </p:column>
			        
			        <p:column style="width:40px">  
						<p:commandButton id="editButton" value="Edit" action="#{booksBackingBean.setSelectedBook(book)}" oncomplete="editBookDialogWidget.show()"/>   
			        </p:column>
			  
			    </p:dataTable>  
			
				<p:dialog id="editbookDialog" widgetVar="editBookDialogWidget" resizable="false" dynamic="true" header="Edit book info" >
					
					<table>
						<tbody>
							<tr>
								<td>
									<h:outputLabel for="editTitle">title</h:outputLabel>
								</td>
								<td>
									<p:inputText id="editTitle" value="#{booksBackingBean.selectedBook.title}" immediate="true"/>
								</td>
							</tr>
							<tr>
								<td>
									<h:outputLabel for="editBookAuthors">authors</h:outputLabel>
								</td>
								<td>
									<p:autoComplete id="editBookAuthors" value="${booksBackingBean.selectedAuthors}" completeMethod="${authorsBackingBean.autocomplete}" multiple="true" var="author" itemValue="#{author}" itemLabel="#{author.firstName} #{author.lastName}" converter="#{authorConverter}" valueChangeListener="${booksBackingBean.authorListUpdated}" />
								</td>
							</tr>
							<tr>
								<td>
									<h:outputLabel for="editDescription">description</h:outputLabel>
								</td>
								<td>
									<p:inputText id="editDescription" value="#{booksBackingBean.selectedBook.description}" immediate="true" />
								</td>
							</tr>
							<tr>
								<td>
									<h:outputLabel for="editISBN">isbn</h:outputLabel>
								</td>
								<td>
									<p:inputText id="editISBN" value="#{booksBackingBean.selectedBook.isbn}" immediate="true" />
								</td>
							</tr>
							<tr>
								<td>
									<h:outputLabel for="editPageCount">page count</h:outputLabel>
								</td>
								<td>
									<p:inputText id="editPageCount" value="#{booksBackingBean.selectedBook.pageCount}" immediate="true" />
								</td>
							</tr>
							<tr>
								<td>
									<h:outputLabel for="editPublicationDate">publication date</h:outputLabel>
								</td>
								<td>
									<p:calendar id="editPublicationDate" value="#{booksBackingBean.selectedBook.publicationDate}" immediate="true" pattern="MM/yyyy" />
								</td>
							</tr>
							<tr>
								<td>
									<h:outputLabel for="editRating">rating</h:outputLabel>
								</td>
								<td>
									<p:rating id="editRating" value="${booksBackingBean.selectedBook.rating}"></p:rating>
								</td>
							</tr>
						</tbody>
					</table>
			  		
			 		<p:commandButton action="#{booksBackingBean.updateSelectedBookInfo()}" value="Update" oncomplete="editBookDialogWidget.hide()" update="allbooks" />
			  	</p:dialog>
			</h:form>
		</p:outputPanel>
	</ui:define>
</ui:composition>
